<template>
  <div>
    <Row>
      <Card style="width:100%" dis-hover="true">
        <span style="margin-left: 20px;">
          <b>菜名</b> &nbsp;
        </span>
        <Input v-model="params.name" placeholder="请输入" style="width: 200px" />
        <span style="margin-left: 50px;">
          <b>类别</b> &nbsp;
        </span>
        <Select clearable v-model="params.role" style="width:200px">
          <Option value="美食">美食</Option>
          <Option value="饮品">饮品</Option>
          <Option value="蔬菜">蔬菜</Option>
          <Option value="水果">水果</Option>
          <Option value="零食">零食</Option>
          <Option value="日用">日用</Option>
        </Select>

        <Button
          type="primary"
          size="default"
          shape="circle"
          icon="ios-search"
          style="margin-left: 130px;"
          @click="search"
        ></Button>
      </Card>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <Table border ref="selection" :highlight-row="true" :columns="columns" :data="foodList">
          <template slot-scope="{ row }" slot="img">
            <img :src="'data:image/png;base64,'+row.img" width="80" height="50" />
          </template>
        </Table>
        <br />
        <Row>
          <Button type="primary" @click="clickAdd">添加菜品</Button>
          <Button type="error" style="margin-left: 20px" @click="removeAll">删除选中</Button>
          <Page
            :total="total"
            :page-size="params.size"
            @on-change="changePage"
            style="float: right"
          />
        </Row>
      </Card>
    </Row>
    <br />

    <Modal width="400px" title="商品" v-model="addFlag" @on-ok="addOrUpdate">
      <Form :model="userForm" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input type="text" v-model="foodForm.name" style="width:200px"></Input>
        </FormItem>
        <FormItem label="分类" prop="cate">
          <Select clearable v-model="foodForm.cate" style="width:200px">
            <Option value="美食">美食</Option>
            <Option value="饮品">饮品</Option>
            <Option value="蔬菜">蔬菜</Option>
            <Option value="水果">水果</Option>
            <Option value="零食">零食</Option>
            <Option value="日用">日用</Option>
          </Select>
        </FormItem>
        <FormItem label="售价" prop="sellPrice">
          <Input type="text" v-model="foodForm.sellPrice" style="width:200px"></Input>
        </FormItem>
        <FormItem label="展示图" prop="img">
          <img
            v-if="foodForm.img != '' && foodForm.img != null"
            :src="'data:image/png;base64,'+foodForm.img"
            width="150"
            height="80"
          />
          <Upload
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :on-format-error="onError"
            :max-size="2048"
            action="/api/food/upload"
            :on-success="onSuccess"
          >
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
          </Upload>
        </FormItem>
      </Form>
    </Modal>

    <div v-if="comments">
      <Button icon="ios-arrow-up" @click="comments = flase">收起</Button>
      <Card style="width:100%" dis-hover="true">
        <List v-if="commentList == null || commentList == ''">
          <ListItem>
            <ListItemMeta title="暂无评论" />
          </ListItem>
        </List>
        <List item-layout="vertical" v-else>
          <ListItem v-for="(item, index) in commentList" :key="index">
            <ListItemMeta
              :avatar="'data:image/png;base64,'+item.headImg"
              :title="item.username"
              :description="item.creatTime"
            />
            <br />
            <b>{{item.content}}</b>
            <img :src="'data:image/png;base64,'+item.imgs" width="80" height="50" />
            <br />
            <div v-if="item.reply != null && item.reply != ''">
              <Tag color="success" style="height:20px;font-size: 15px">已回复:{{item.reply}}</Tag>&nbsp;&nbsp;
              <Button
                type="error"
                shape="circle"
                size="10"
                icon="md-trash"
                @click="removeComment(item.id)"
              ></Button>
            </div>
            <template slot="action">
              <li>
                <Icon size="20" type="md-star-outline" />
                {{item.likeIds}}
              </li>
              <li>
                <Input
                  v-if="item.reply == null || item.reply == ''"
                  icon="ios-undo"
                  v-model="replyContent"
                  style="width: 300px"
                  placeholder="请输入回复内容"
                  @on-click="reply(item.id)"
                />
              </li>
            </template>
          </ListItem>
        </List>
      </Card>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { getUser } from "@/libs/util.js";
import * as myShopApi from "@/api/myShop.js";
import * as orderApi from "@/api/order.js";
import excel from "@/libs/excel";
export default {
  data() {
    return {
      addFlag: false,
      editFlag: false,
      total: 0,
      shopId: 0,
      time: false,
      comments: false,
      params: {
        id: "",
        name: "",
        status: "",
        size: 10,
        page: 1
      },
      foodForm: {
        shopId: '',
        foodId: '',
        name: "",
        sellPrice: 0,
        img: "",
        cate: ""
      },
      replyContent: "",
      foodList: [],
      commentList: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "菜品id",
          key: "foodId"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "分类",
          key: "cate"
        },
        {
          title: "售价",
          key: "sellPrice"
        },
        {
          title: "销量",
          key: "totalSales"
        },
        {
          title: "封面图",
          slot: "img"
        },
        {
          title: "创建时间",
          key: "creatTime",
          width: "120"
        },
        {
          title: "操作",
          width: "170px",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.foodForm.foodId = params.row.foodId;
                      this.foodForm.name = params.row.name;
                      this.foodForm.sellPrice = params.row.sellPrice;
                      this.foodForm.img = params.row.img;
                      this.foodForm.cate = params.row.cate;
                      this.editFlag = true;
                      this.addFlag = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showComments(params.row.foodId);
                    }
                  }
                },
                "查看评论"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    initList: function() {
      myShopApi.getFoodList(this.params).then(res => {
        if (res.data.code == 200) {
          this.foodList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    removeAll: function() {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除所选记录吗?</p>",
        onOk: () => {
          const foodList = this.$refs.selection.getSelection();
          myShopApi.removeAll(foodList).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    removeComment: function(id) {
      console.log(id);
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除回复吗?</p>",
        onOk: () => {
          myShopApi.removeComment(id).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
              this.comments = false;
            } else {
              this.$Message.success("服务器发生错误");
            }
          });
        },
        onCancel: () => {}
      });
    },
    reply: function(id) {
      myShopApi.addReply(id, this.replyContent).then(res => {
        if (res.data.code == 200) {
          this.replyContent = "";
          this.comments = false;
          this.initList();
          this.$Message.success("回复成功");
        } else {
          this.$Message.success("服务器发生错误");
        }
      });
    },
    changePage: function(page) {
      this.params.page = page;
      this.initList();
    },
    search: function() {
      this.params.page = 1;
      this.initList();
      this.comments = false;
    },
    clickAdd: function() {
      this.foodForm.name = "";
      this.foodForm.sellPrice = 0;
      this.foodForm.img = "";
      this.foodForm.cate = "";
      this.addFlag = true;
      this.editFlag = false;
    },
    showComments(foodId) {
      myShopApi.getComment(foodId).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.commentList = res.data.data;
          this.comments = true;
        } else {
          this.$Message.error("获取评论失败");
        }
      });
    },
    addOrUpdate: function() {
      myShopApi.addOrUpdateFood(this.foodForm).then(res => {
        if(res.data.code == 200){
          this.$Message.success("添加成功");
          this.initList();
          this.addFlag = false;
        } else {
          this.$Message.error("添加失败");
        }
      })
    },
    onError: function() {
      this.$Message.error("上传失败！请检查文件格式以及大小是否超过2M");
    },
    onSuccess: function(response, file, fileList) {
      if (response.code == 200) {
        Vue.set(this.foodForm, "img", response.data);
        // this.foodForm.img = response.data;
        this.$Message.success("上传成功");
      }
    }
  },
  mounted() {
    var s = getUser();
    this.params.id = s.slice(4);
    this.foodForm.shopId = s.slice(4);
    this.initList();
  }
};
</script>
<style>
.hr {
  margin-top: 7px;
  *margin: 0;
  border: 0;
  color: grey;
  background-color: black;
  height: 1px;
}
</style>
